<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>12306 铁路会员</title>
    <link rel="stylesheet" href="framework/font-awesome/css/font-awesome.min.css">
    <link rel="stylesheet" href="framework/reset.css">
    <link rel="stylesheet" href="styles/member.css">
</head>
<body>
    <!-- 总容器 -->
    <div class="wrapper">
        <!-- header部分 -->
        <header class="fixed-header">
            <p class="member">铁路会员</p>
            <p class="should-know">会员须知</p>
        </header>

        <!-- 二星会员部分 -->
        <div class="two-star-member">
            <div class="left">
                <div class="horizontal">
                    <img src="images/diamond.png" alt="二星会员logo">
                    <a href="">
                        <p><strong>二星会员</strong></p>
                        <i class="fa fa-angle-right"></i>
                    </a>

                </div>
                <div class="vertical">
                    <p>2653乘车积分将于18日后到期</p>
                </div>
            </div>
            <div class="right">
                <i class="fa fa-user-plus"></i>
                <a href="">受让人</a>
            </div>
        </div>

        <!-- 积分部分 -->
        <div class="points">
            <p class="point-text">升级三星会员还需41290乘车积分</p>
            <div class="point-box">
                <div class="train-point">
                    <p class="number">8710</p>
                    <p class="text">乘车积分</p>
                </div>
                <div class="eat-points">
                    <p class="number">0</p>
                    <p class="text">订餐积分</p>
                </div>
            </div>
        </div>
        <!-- 会员权益部分 -->
        <div class="member-benefits">
            <div class="title">
                <img src="images/会员权益title.png" alt="会员权益">
            </div>
            <div class="benefit-info">
                <img src="images/积分权益.png" alt="积分权益">
                <img src="images/兑换车票.png" alt="兑换车票">
                <img src="images/无票候补.png" alt="无票候补">
                <img src="images/会员活动.png" alt="会员活动">
            </div>
        </div>

        <!-- 精彩会员活动部分 -->
        <div class="member-activity">
            <div class="title">
                <p>精彩会员活动</p>
            </div>
            <div class="activity-info">
                <img src="images/member-activity.png" alt="精彩会员活动内容">
            </div>
        </div>

        <!-- 常见问题部分 -->
        <div class="problems">
            <div class="title">
                <div class="left">
                    <p>常见问题</p>
                </div>
                <a href="" class="right">
                    <i class="fa fa-refresh"></i>
                    <p>换一换</p>
                </a>
            </div>
            <div class="problem-list">
                <ul>
                    <li>
                        <p>铁路畅行常旅客会员乘车积分有遗漏怎么办</p>
                        <a href=""><i class="fa fa-angle-right"></i></a>
                    </li>
                    <li>
                        <p>如何查询铁路畅行常旅客会员积分遗漏补登结果</p>
                        <a href=""><i class="fa fa-angle-right"></i></a>
                    </li>
                    <li>
                        <p>积分可兑换哪些产品或服务</p>
                        <a href=""><i class="fa fa-angle-right"></i></a>
                    </li>
                    <li>
                        <p>铁路畅行常旅客会员乘车积分如何获得</p>
                        <a href=""><i class="fa fa-angle-right"></i></a>
                    </li>
                </ul>
            </div>
        </div>

        <!-- 会员手册部分 -->
        <div class="member-handbook">
            <a href="">会员手册</a>
        </div>
        <!-- 底部菜单部分 -->
        <ul class="footer">
            <li class="index" onclick="location.href='index.html'">
                <i class="fa fa-train"></i>
                <p>首页</p>
            </li>
            <li onclick="location.href='travel-service.html'">
                <i class="fa fa-suitcase"></i>
                <p>出行服务</p>
            </li>
            <li onclick="location.href='order.html'">
                <i class="fa fa-file-text-o"></i>
                <p>订单</p>
            </li>
            <li class="member" onclick="location.href='member.html'">
                <i class="fa fa-diamond"></i>
                <p>铁路会员</p>
            </li>
            <li>
                <i class="fa fa-user-o"></i>
                <p>我的</p>
            </li>
        </ul>
    </div>
</body>
</html>